<template>
  <div class="morelist">
    <div class="filter-top" @click="showFilter = true"> 
      <!-- <div class="change-box">
        
      </div> -->
      <!-- <div class="iconfont iconshaixuan" @click="showFilter = true"></div> -->
      请选择筛选条件 <div class="isclick"> </div> 
    </div>
    <div class="data-list"> 
      <div class="data-header">
        <!-- <div class="data-header-title">设备门店 </div> -->
        <div class="data-header-title">渠道名</div>
        <div class="data-header-title">订单时间</div>
        <div style="width: 0.8rem;text-align: center;">金额</div>
        <div style="width: 0.8rem;text-align: center;">状态</div>
      </div>
      <div>
        <div class="data-row" v-for="(item,index) in list" :key="index" :style="{ 'background': index % 2 == 0 ? '#fff' : '#f5f5f5'}" @click="showZGDialog(index)">
          <div class="data-row-item">{{item.channelName}} </div>
          <div class="data-row-item">{{item.createDate}} </div>
          <div style="width: 0.8rem;text-align: center;">{{item.ticketMoney}} </div>
          <div style="width: 0.8rem;text-align: center;">{{item.statusDes}} </div>
        </div> 
      </div>
      <div class="view-more isbtn" @click="getMore" v-if="currTotalRow <= totalPage">
        <span>加载更多</span>  <div class="isclick"></div>
      </div>
      <div class="view-more isbtn" v-else>
        <span>没有更多内容啦~</span>  
      </div>
    </div>
    <!--  下拉筛选 -->
    <top-filter :showFilter.sync="showFilter">
      <div class="filter-content" @click.stop>
        <!-- <search v-model="searchText"
                position= "relative"
                placeholder="请输入商品名"
                ref="search">
        </search> -->
        <div class="filter-title">时间段</div>
        <div class="data-time-box">
          <div class="row-box">
            <group>
              <datetime v-model="starTime" :end-date="defult_endTime"></datetime>
            </group> 
          </div>
          <div>至</div>
          <div class="row-box">
            <group>
              <datetime v-model="endTime" :end-date="defult_endTime"></datetime>
            </group> 
          </div>
        </div>

        <div class="" v-if="isExistShop==false">渠道</div>
        <div class="row-box" v-if="isExistShop==false">
          <group>
            <popup-picker v-model="shop" show-name :data="shopList"
             @on-shadow-change="nextShop" placeholder="请选择渠道"></popup-picker>
          </group> 
        </div>
        <div class="btn-box">
          <div class="reset btn" @click="reset">重置</div>
          <div class="confirm btn" @click="confirmSelect">确认</div>
        </div>
      </div>
    </top-filter> 
 
    <x-dialog :show.sync="zg_show" class="dialog"  hide-on-blur>
      <div class="dialog-content">
        <row title="渠道名称" :value="list[viewIndex] && list[viewIndex].channelName"></row> 
        <row title="兑换券数" :value="list[viewIndex]&&list[viewIndex].ticketNum + ''"></row>  
        <row title="兑换金额" :value="list[viewIndex]&&list[viewIndex].ticketMoney + '元'"></row>
        <row title="订单状态" :value="list[viewIndex]&&list[viewIndex].statusDes" ></row>  
        <row title="订单时间" :value="list[viewIndex]&&list[viewIndex].createDate" ></row>  
        
      </div>
    </x-dialog>

  </div> 
</template>

<script> 
import { Search } from 'vux'
import api from '@/api/api.js' 
import row from '@/components/row' 
import topFilter from '@/components/topFilter'
import { Datetime, Group, PopupPicker,XDialog } from 'vux'
import util from '@/utils/util.js'
export default {
  name: 'more',
  components: {
    Search,
    topFilter,
    XDialog,
    Datetime, 
    row,
    Group, 
    PopupPicker, 
  },
  data () {
    return { 
      isExistShop:false,
      
      starTime:'',
      endTime: '',
      dialogShow:false,
      orderType:0,
      zg_show:false,
      viewIndex:0,
      list:[{}],
      showIndex:false,
      searchText:'',
      showFilter: false,
      defult_endTime:'',
      totalPage:0,
      currTotalRow:0,
      type:0,
      "pageSize": 20,
      "pageNum": 1, 
      shop:[],
      shopList:[],
      shopList_res:[],
      shopPage:{
            totalPage:0,
            pageSize:20,
            pageNum:1,
            currTotalRow:0,
         },
      
    }
  },
  created (){
    this.getAmouthDay();
  }, 
  mounted () {  
    if(this.$route.query.startTime){
      this.type = 1;
    }
    if(this.$route.query.id){
      this.shop = [this.$route.query.id];
      this.isExistShop=true;
    }
    this.getShopList()

    this.getData(this.$route.query);

  },
  methods: {
    // 筛选默认最近一个月
    getAmouthDay(){ 
      let today= new Date();
      let mounth_ago =  new Date(today.getTime()-(30*24*60*60*1000)); 
      this.starTime = util.timeTampt(mounth_ago);
      this.endTime= util.timeTampt(today); 
      this.defult_endTime = util.timeTampt(today); 
    },
    nextShop(ids){
      var lens = this.shopList_res.length;
      if (lens>2){
          var maxId1 = this.shopList_res[lens-1].channelId;
          var maxId2 = this.shopList_res[lens-2].channelId;
          var maxId3 = this.shopList_res[lens-3].channelId;
          //console.info("----------maxId="+maxId)
          if (ids == maxId1 || ids == maxId2 || ids == maxId3){
            console.info("--------------请求下一页")
            if (this.shopPage.currTotalRow<this.shopPage.totalPage){
              this.shopPage.pageNum++;
              this.getShopList();
            }
          }
      }
    },
    getShopList(){
      let data = {
        pageNum: this.shopPage.pageNum,
        pageSize: this.shopPage.pageSize,
      } 
      api.shopMng.shopList(data,res=>{ 
            console.info("--------------请求下一页")
        if (data.pageNum==1){
          this.shopList_res=res.result.data;
        }else{
          this.shopList_res=this.shopList_res.concat(res.result.data);
        }
        console.info(this.shopList_res)
        const ary = this.shopList_res.map(item=>{
            return {
                name: item.channelName,
                value: item.channelId
            }
        });
        this.shopList = [ary]
        console.info(this.shopList)
        this.shopPage.totalPage = res.result.totalPage;
        
        this.shopPage.currTotalRow= data.pageNum * data.pageSize;
      })
    },
    
    confirmSelect(){
      this.pageNum = 1;
      this.type = 0 ;
      this.getData();
    },
    showDialog(index){
      this.viewIndex = index;
      this.dialogShow = true;
    },
    showZGDialog(index){
      this.viewIndex = index;
      this.zg_show = true;
    },
    //重置筛选
    reset(){
      this.searchText = '';
      this.getAmouthDay();
    },
    filterShow(){
      this.showFilter = !this.showFilter
    },
    showChilderGoods(idx1,idx2){
      let bool = !this.list[idx1].goodsList[idx2].hidden;
      this.$set(this.list[idx1].goodsList[idx2],"hidden",bool);
    },
    changeOrderType(){

      if(this.orderType>=2){
        this.orderType=0;
      }else{
         ++this.orderType;
      } 
     
      this.pageNum = 1;
      this.getData();
    },
    getMore(){
      this.getData();
    },
    resultClick(e){
      console.log(e)
    },

    getData(params){
      params = params || {};
      let defult = {
        "pageSize": this.pageSize,
        "pageNum": this.pageNum,
        "storeId":this.$route.query.id
      }
      // if(this.searchText){
      //   params.goodsName = this.searchText;
      // }
      if(this.type){ 
          params.startTime = this.$route.query.startTime || this.starTime; 
          params.endTime = this.$route.query.endTime || this.endTime;
      }else{
         if(this.starTime){
          params.startTime = this.starTime;
        }
        if(this.endTime){
          params.endTime = this.endTime;
        }
      }
      if(this.shop[0]){
        params.queryChannelId = this.shop[0];
      }
      
      params = Object.assign(defult,params); 
      return api.data.saleOrderList(params,res=>{
        this.showFilter=false;
        this.list = params.pageNum==1 ? res.result.data : this.list.concat(res.result.data); 
        this.currTotalRow = params.pageNum * params.pageSize;
        ++this.pageNum; 
        this.totalPage = res.result.totalPage;
      })
      
    
    },
    
    onSubmit(e){
      console.log(e)
    }
  }
}
</script>
 
<style lang="less" scoped> 
.goods-title{
  padding: .20rem .32rem;
  font-weight: bold;
  text-align: left;
}
.change-box{
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconqiehuan{
  margin-left: .08rem;
}
.flex_lay{
  display: flex;
  align-items: center;
}
.morelist{
  padding-top: 44px;
}
.dialog-content{
  background: #fff;
  border-radius: 8px;
  min-height: 170px;
}
.grayfont{
  color: #666;
}
.redfont{
  color: red;
}
/deep/.weui-dialog{
  max-width: 100%;
  width: 85%;
}
/deep/.weui-search-bar__label{
  top: 3px;
}
.goods-row-item{
  justify-content: space-between;
  height: .88rem; 
  padding: 0 .20rem;
}
.gray-bg{
  background: #f5f5f5;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/deep/.vux-popup-picker-select{
  text-align: left !important;
}
/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
.btn-box{
  display: flex;
  width: 100%;
  margin-top: 20px;
  height: 44px;
  justify-content: space-between; 
  .btn{
    border-radius: 8px;
    height: 44px;
    width: 45%;
    line-height: 44px;
    text-align: center;
    color: #fff;
    &:active{
      opacity: .7;
    }
    &.reset{
      background: #ddd;
    }
    &.confirm{
      background: #FABE00;
    }
  }
}
.iconshaixuan{
  position: absolute;
  right: .20rem;
  top: .28rem;
}
.filter-top{
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 3;
  .isclick{
    border-width: 0 1px 1px 0;
    margin-top: -6px;
  }
}
.data-list{
    padding-top: 48px;
  .data-header{
    height: 48px;
    line-height: 48px;
    font-weight: bold;
    background: #ddd;
    display: flex;
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    .data-header-title{
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .data-row{
    height: 48px;
    line-height: 48px;
    display: flex;
    &-item{
      flex: 1;
      //text-align: center;
      margin-left: 0.1rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
.view-more{
  color: #999;
  display: flex;
  align-items: center;
  height: 44px;
  justify-content: center; 
  .isclick{
    // border-width: 0 1px 1px 0;
    // margin-top: -6px;
  }
}
</style>
